<template>
 <div class='gray-body w750' :class="Nomsg?'white-bg':''">
    <template v-if="!Nomsg">
        <div class='order-detail' style="margin-bottom: 0px;" :class="themes.theme">
            <div class="order-state">
                <div class="state-txt">
                    <template>
                        <div class="sta" v-if="orderDet.orderStatus == 0">等待发货</div>
                        <div class="sta" v-if="orderDet.orderStatus == 1">卖家已发货</div>
                        <div class="sta" v-if="orderDet.orderStatus == 2">交易成功</div>
                        <div class="sta" v-if="orderDet.orderStatus == 3">取消订单</div>
                    </template>
                    <template>
                        <div class="des" v-if="orderDet.orderStatus == 0">请耐心等待商家发货</div>
                        <div class="des" v-if="orderDet.orderStatus == 1">请耐心等待</div>
                        <div class="des" v-if="orderDet.orderStatus == 2">感谢您的购物，欢迎您再次光临</div>
                        <div class="des" v-if="orderDet.orderStatus == 3">您的订单已取消</div>
                    </template>
                </div>
                <div class="state-img"><img src="../../assets/images/order-state.png" alt=""></div>
            </div>

            <div class="order-msg logistics" v-if='wuliuType' @click="checkLogistical(orderDet.orderSn)">
                <div class="user-info"><img src="../../assets/images/logistics.png" alt=""><em class="item">{{logisticsArr[0].context}}</em></div>
                <div class="address-det">{{logisticsArr[0].ftime}}</div>
                <i class="arr"><img src="../../assets/images/arrow.png" alt=""></i>
            </div>

            <div class="order-msg">
                <div class="user-info"><img :src="require(`../../assets/style-images/sub-local-${themes.theme}.png`)" alt=""/><em class="item">{{addressDto.receiver}}</em><em class="item">{{addressDto.mobile}}</em></div>
                <div class="address-det">{{addressDto.province}}&nbsp;{{addressDto.city}}&nbsp;{{addressDto.area}}&nbsp;{{addressDto.subAdds}}</div>
            </div>

            <div class="order-list">
                <div class="list-item">
                    <div class="pro-mes" v-for="(item, index) in orderDet.orderItemDtos" :key="index" @click="toPointsGoodsDetail(item.prodId)">
                        <div class="pro-img"><img :src="$imgUrlHead + item.prodPic" alt=""></div>
                        <div class="pro-name">
                            <div  class="name">{{item.prodName}}</div>
                            <div class="sku"><span class="goods-num">数量：{{item.basketCount}}</span></div>
                            <div class="goods-btn clearfix"><span class="price" style="color: #4eae31"><em class="now" style="color: #4eae31">{{item.exchangeIntegral}}</em>&nbsp;积分</span></div>
                        </div>
                    </div>
                    <div class="contact-btn"><span @click="serviceChat"  class="btn">联系平台客服</span></div>
                </div>
            </div>

            <div class="order-other-msg">
                <div class="item-box">
                    <div class="other-item">
                        <b class="item-b">订单编号：</b>
                        <span class="item-span">{{orderDet.orderSn}}</span>
                        <span  class="item-a" v-clipboard:copy="orderDet.orderSn" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
                    </div>
                    <div class="other-item">
                        <b class="item-b">下单时间：</b>
                        <span class="item-span">{{ orderDet.addTime | dateformat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </div>
                </div>


                <div class="item-box" v-if="deliveryDto">
                    <div class="other-item">
                        <b class="item-b">配送方式：</b>
                        <span class="item-span">{{deliveryDto.delName}}</span>
                    </div>
                </div>
            </div>

            <div class="order-other-msg">
                <div class="item-box">
                    <div class="other-item">
                        <span class="item-span price price-b"><small class="price-s">实付：</small><em class="now">{{orderDet.integralTotal}}</em>&nbsp;积分</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="order-detail-foot" v-if="orderDet.orderStatus == 0" :class="themes.theme">
            <div class="foot-box clearfix" >
                <span  class="foot-btn" @click="cancelOrder()">取消订单</span>
            </div>
        </div>

        <div class="order-detail-foot" v-if="orderDet.orderStatus == 1" :class="themes.theme">
            <div class="foot-box clearfix" >
                <span  class="foot-btn " @click="checkLogistical(orderDet.orderSn)" >查看物流</span>
                <span  class="foot-btn cur" @click="confirmGoods(orderDet.orderSn)">确认收货</span>
            </div>
        </div>

        <div class="order-detail-foot" v-if="orderDet.orderStatus == 3" :class="themes.theme">
            <div class="foot-box clearfix" @click="deleteOrder()">
                <span  class="foot-btn">删除订单</span>
            </div>
        </div>

        <div style="height:60px;"></div>
    </template>
    <Noempty :pic="require('../../assets/images/order-empty.png')" :title="'该积分订单数据不存在，请联系客服'" v-if='Nomsg' />
 </div>
</template>

<script>
import cash from 'utils/tool';
import {mapState} from 'vuex'
import Noempty from 'components/Noempty/Noempty';
import { integralOrderDetail,integralOrderReceive,integralOrderCancel,integralOrderDel } from "api/pointsApi";
import { integralLogistics } from "api/order";
import { addShopBuy } from "api/cart";
 export default {
    data () {
        return {
             
            Nomsg: false,
            orderDet: '',
            addressDto: '',  //地址
            deliveryDto: '',
            orderSn: this.$route.query.orderSn,
            logisticsArr: '', //物流数据
            wuliuType: false,
        }
    },
    components: {
      Noempty
    },
    mounted () {
        let that = this

        this.getorderDet(this.orderSn)
    },
    methods: {
       //获取订单详情数据
        getorderDet(orderSn) {
            this.$toast.loading({message: '加载中...',duration: 0});
            integralOrderDetail({orderSn: orderSn}).then( res=>{
                this.$toast.clear()
                if (res.status == 1) {
                    if (res.result) {
                        this.orderDet = res.result
                        if (res.result.usrAddrSubDto) {this.addressDto = res.result.usrAddrSubDto}
                        if ( res.result.delivery) {this.deliveryDto = res.result.delivery}
                        //状态等于1，2 时才有物流信息
                        if (res.result.orderStatus == 1 || res.result.orderStatus == 2) {
                            return integralLogistics({
                                orderSn: res.result.orderSn
                            })
                        }
                    } else {
                        this.Nomsg=true
                    }
                } else {
                    this.Nomsg=true
                    this.$toast(res.msg)
                }
            }).then(res => {
                if (res) {
                    if (res.status == 1) {
                        this.logisticsArr = JSON.parse(res.result.dvyDetail)   //物流格式化
                        this.wuliuType = true
                    } else {
                        this.wuliuType = false
                    }
                }
            }).finally(() => {
                this.$toast.clear()
            });
        },

       //确认收货
        confirmGoods(orderSn) {
            this.$dialog.confirm({
                title: '确认收货',
                message: '您确定要收货?'
            }).then(() => {
                integralOrderReceive({
                    orderSn: orderSn
                }).then(res =>{
                    if (res.status == 1) {
                        this.$toast('收货成功!')
                        setTimeout( () =>{
                            this.refreshPage()
                        },1000)
                    } else {
                        this.$toast(res.msg);
                    }
                })
            }).catch(() => {
                // on cancel
            });
        },

       //删除订单
        deleteOrder() {
            this.$dialog.confirm({
                title: '删除订单',
                message: '你确认是否删除改订单'
            }).then(() => {
                integralOrderDel({
                    orderSn: this.orderSn
                }).then(res =>{
                    if (res.status == 1) {
                        this.$toast({message: '删除订单成功',duration:1000});
                        setTimeout( () =>{
                            this.$router.back();
                            this.$router.isBack = true
                        },1500)
                    } else {
                        this.$toast(res.msg);
                    }
                })
            }).catch(() => {
                // on cancel
            });
       },

        //查看物流
        checkLogistical(orderSn) {
            this.$router.push({
                path: `/logistics`,
                query: {
                    orderSn: orderSn
                }
            });
        },

        //取消订单
        cancelOrder() {
            this.$dialog.confirm({
                title: "取消订单",
                message: "你确定要取消改订单"
            }).then(() => {
                integralOrderCancel({
                    orderSn: this.orderSn
                }).then(res => {
                    if (res.status == 1) {
                    this.$toast("取消订单成功");
                    setTimeout( ()=> {
                        this.refreshPage()
                    }, 1000);
                    } else {
                    this.$toast(res.msg);
                    }
                });
            })
            .catch(() => {
            // on cancel
            });
        },
        refreshPage() {
            this.getorderDet(this.$route.query.orderSn)
        },

        //复制
        onCopy(e) {
            this.$toast.success({
                message: '内容已复制',
                duration: 1000
            });
        },
        onError() {
            this.$toast.fail({
                message: '内复制失败',
                duration: 1000
            });
        },

        //去积分商品详情
        toPointsGoodsDetail(prodId) {
            this.$router.push({
                path: `/pointsGoodsDetail`,
                query: {
                    id: prodId,
                }
            });
        },

        //去客服
        serviceChat() {
            this.$router.push({
                path: `/serviceChat`,
                query: {
                    consultId: 0,
                    consultType: 'other',
                    shopId: 0
                }
            })
        }
   },
   computed: {
    ...mapState(['themes']),
    },
 }
</script>

<style src="../../assets/css/style/my-style.css" scoped></style>
<style src="../../assets/css/order.css" scoped></style>